<template>
    <el-dialog :close-on-click-modal="false" title="交易明细" :visible.sync="visible" width="45%" :before-close="handleClose">
        <el-table :data="myTrade" stripe style="width: 100%" height="480">
            <el-table-column prop="act_content" label="交易类型" align="center" show-overflow-tooltip />
            <el-table-column prop="act_createTime" label="提交时间" align="center"/>
            <el-table-column prop="act_recharge" label="入账" align="center" />
            <el-table-column prop="act_cash" label="出账" align="center" />
        </el-table>
        <div :style="{textAlign: 'center', marginTop: '8px'}">
            <Pagination :pagination="detailPagination" :numChange="handlePaginate" :reload="reload"/>
        </div>
    <template #footer>
      <div class="buttons">
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex';
import Pagination from '@/components/Pagination';

export default {
    name:'' ,
    components: {
        Pagination
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo,
            myTrade: state => state.user.myTrade,
            detailPagination: state => state.user.detailPagination,
            reload: state => state.user.reload,
            login: state => state.user.login
        })
    },
    data() {
        return {
        };
    },
    methods: {
        ...mapActions({
            fetchGetDetail: 'user/fetchGetDetail'
        }),
        handleClose(){
            this.$emit('close');
        },
        handlePaginate(num){
            this.fetchGetDetail({
                act_userid: this.userInfo.user_id,
                pn: num,
                pageSize: this.detailPagination.pageSize
            });
        }
    },
    watch: {
        visible(n){
            if(n){
                this.fetchGetDetail({
                    act_userid: this.login ? this.userInfo.user_id : JSON.parse(localStorage.userInfo).user_id,
                    pn: this.detailPagination.pageNum,
                    pageSize: this.detailPagination.pageSize
                });
            }
        }
    }
}
</script>
<style lang='scss' scoped src="./index.scss"/>
